<script setup lang="ts">
import { ref } from "vue"
// @ts-ignore
import { Combinator, OffscreenSprite } from '../../@webav/av-cliper/dist/av-cliper.js'
import { loadSprite, getMP4ClipFromFile, getReturnUrl } from "../utils/loadVideo"
import { clipTick } from "../utils/tool"
const videoUrl = ref("")

async function load(s1: OffscreenSprite, s2: OffscreenSprite) {
    const com = new Combinator({ width: 518, height: 920 })
    const spr1 = s1
    const spr2 = s2
    console.log(spr1)
    spr2.rect.angle = Math.PI
    // 参考 css animation
    spr2.setAnimation(
        {
            from: { angle: Math.PI, x: 0, y: 0, opacity: 1 },
            to: { angle: Math.PI * 2, x: 300, y: 300, opacity: 0 }
        },
        { duration: 1, iterCount: 1 }
    )
    // 合并成长度 10s 的视频，丢弃 10s 以后的部分
    await com.add(spr1, { duration: 10, main: true })
    // 第二个视频从第 3s 开始出现，叠加在第一个视频上方
    await com.add(spr2, { offset: 3 })
    // com.output() return a ReadableStream, upload or save to disk
    console.log(com)
    getReturnUrl(com).then((res) => {
        console.log(res)
        videoUrl.value = res
    })
}



const fileDom = ref<HTMLInputElement>()
async function fileChange() {
    let mp1 = await getMP4ClipFromFile(fileDom.value!.files![0])
    let mp2 = await getMP4ClipFromFile(fileDom.value!.files![0])
    let s1: OffscreenSprite = await loadSprite(mp1)
    let s2: OffscreenSprite = await loadSprite(mp2)


    let img = new Image()
    img.src = await clipTick(mp1, 0)
    document.body.appendChild(img)


    load(s1, s2)
}


</script>

<template>
    <input type="file" ref="fileDom" @change="fileChange">
    <video :src="videoUrl"></video>
</template>

<style scoped></style>
